<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="15">
                <div class="grid-content bg-purple">
                    <el-button size="mini" round @click="add()" icon="el-icon-plus">新增</el-button>
                    <el-button size="mini" round @click="edit()" icon="el-icon-edit">修改</el-button>
                    <el-button size="mini" round @click="dele()" icon="el-icon-delete">删除</el-button>
                </div>
            </el-col>
            <el-col :span="9">
                <div class="grid-content bg-purple searchBox">
                    <el-input size="mini" style="width:200px" v-model="formInline.user" placeholder="请输入搜索内容">
                    </el-input>
                    <el-button size="mini" round @click="search()">查询</el-button>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" border style="width: 100%;margin-top: 15px;">
            <el-table-column fixed prop="date" label="日期" width="150">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="province" label="省份" width="120">
            </el-table-column>
            <el-table-column prop="city" label="市区" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="300">
            </el-table-column>
            <el-table-column prop="zip" label="邮编" width="120">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100"
            layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
    </div>
</template>
<script>
export default {
    name: 'outlands',
    data() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1517 弄',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1519 弄',
                zip: 200333
            }, {
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1516 弄',
                zip: 200333
            }],
            formInline: {
                user: ''
            },
            currentPage: 1
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        handleClick(row) {
            console.log(row);
        },
        search() {

        },
        add() {

        },
        edit() {

        },
        dele() {

        }
    }
}
</script>
<style scoped>
.searchBox {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}
.el-pagination{
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>